<template>
	<view class="container">
		<scroll-view class="list" :scroll-y="true" scroll-with-animation>
		      <!-- 列表展示 -->
		      <view 
		        v-for="(item, index) in clients" 
		        :key="index" 
		        class="card"
				:data-index="item.companionId"
		      >
		        <image class="card-image" :src="app.globalData.utils.baseUrl + item.avatarUrl" mode="aspectFill"></image>
		        <!-- 右侧人物介绍 -->
				<view class="card-content" @click.stop="onClientSelected(item)">
				  <text class="card-name">{{ item.name }}</text>
				  <text class="card-age">年龄: {{ item.age }}</text>
				  <text class="card-phone">电话: {{ item.phoneNumber }}</text>
				  <text class="card-email">家庭住址: {{ item.address }}</text>
				  <text class="card-specialty">专长领域: {{ item.specialization }}</text>
				</view>
		      </view>
		    </scroll-view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		toRaw
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	const app = getApp()
	const act=ref('')
	const clients=ref()
	onLoad((options)=>{
		act.value=options.act
		console.log('就诊人options',options);
		if(options.act==='select'){
			uni.setNavigationBarTitle({
				title:'请选择陪诊师'
			})
		}else{
			uni.setNavigationBarTitle({
				title:'管理就诊人'
			})
		}
		app.globalData.utils.myrequest({
			myurl: '/pz/companions/list',
			data:{
				hospitalId:1,
				pageSize:1000,
				pageNum:1
			},
			mysuccess: (indexres) => {
				console.log('陪诊人页面数据', indexres);
				clients.value=indexres.rows
				
			}
		})
		
	})
	const onClientSelected=(e)=>{
		console.log('selectmaninfo',e);
		uni.$emit('changeClient',e)
		uni.navigateBack()
	}
	const removeClient=()=>{
		
	}
</script>

<style scoped lang="scss">
/* 页面根容器 */
.container {
  padding: 0;
  margin: 0;
  background-color: #f7f7f7;
  height: 100vh;  /* 全屏高度 */
}

/* 年龄字段样式 */
.card-age {
  font-size: 14px;
  color: #999;
  margin-bottom: 4px;
}

/* 标题样式 */
.title {
  font-size: 24px;
  font-weight: bold;
  padding: 20px;
  text-align: center;
  color: #333;
  background-color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); /* 标题文字加阴影 */
}

/* 使用 scroll-view 时, 可以去除 list 容器的 padding */
.list {
  padding: 0;
  margin: 0;
  max-height: calc(100vh - 80px); /* 限制 list 容器的最大高度，减去标题的高度 */
  background-color: #fff;
}

/* 卡片样式 */
.card {
  width: 100%;
  background-color: #ffffff; /* 白色背景 */
  margin-bottom: 16px;
  display: flex; /* 使用 flex 布局 */
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 轻微的阴影 */
  border-radius: 12px; /* 圆角效果 */
  overflow: hidden;
  transition: transform 0.3s ease-in-out; /* 鼠标悬浮时的动画效果 */
  background-color: #f8f8f8; /* 背景色改为浅灰色，符合微信风格 */
}

.card:hover {
  transform: scale(1.03); /* 鼠标悬浮时放大效果 */
}

/* 图片样式 */
.card-image {
  width: 120px;  /* 图片固定宽度 */
  height: 120px; /* 图片固定高度 */
  border-radius: 8px;
  margin-right: 20px; /* 图片和文本之间的间距 */
}

/* 内容区域 */
.card-content {
  flex: 1; /* 右侧内容区域占据剩余空间 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中对齐内容 */
}

/* 卡片人物名称 */
.card-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 6px;
  letter-spacing: 0.5px; /* 字间距 */
  text-transform: capitalize; /* 首字母大写 */
}

/* 电话 */
.card-phone,
.card-email,
.card-specialty {
  font-size: 14px;
  color: #999;
  margin-bottom: 4px; /* 每个项之间的间距 */
  line-height: 1.6;
  word-wrap: break-word; /* 自动换行 */
  white-space: normal; /* 允许文本换行 */
}

/* 电话样式 */
.card-phone {
  font-style: italic; /* 设置电话字段为斜体 */
  color: #999; /* 蓝色字体 */
}

/* 邮箱样式 */
.card-email {
  font-style: italic;
  color: #999; /* 绿色字体 */
}

/* 专长领域样式 */
.card-specialty {
  font-style: normal;
  color: #999; /* 橙色字体 */
}
</style>
